<%@ page contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
		<title>退单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="${ctxStatic }/wx/mui/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="${ctxStatic }/wx/css/backlist.css" />
		<script src="${ctxStatic }/wx/mui/js/mui.min.js"></script>
		<script src="${ctxStatic }/zepto/zepto.min.js"></script>
	</head>
<body>
	<header class="mui-bar mui-bar-nav" style="background: #16c59b;">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">退单</h1>
	</header>
		<div class="mui-content">
			<div class="back-list-box">
				<p class="back-list-tit">退款原因</p>
				<div class="b-l-ghs">
						<div class="mui-input-row mui-radio mui-left">
							<label>我要取消行程，不想用车了</label>
							<input name="radio1" type="radio">
						</div>
						<div class="mui-input-row mui-radio mui-left">
							<label>定错行程、时间、日期、姓名</label>
							<input name="radio1" type="radio" checked>
						</div>
				</div>
			</div>
			<div class="back-list-box">
				<p class="back-list-tit">退款明细</p>
                 <div class="back-list-txt">
                 	  <p>核对退票金额温馨提示 ：根据退票规则规定，本次退票可能产生相应费用，望知悉。</p>
                 	  <p>本次退款产生手续费<font style="color: #16C59B;" id="penalty">  </font>&nbsp;
                 	  	应退还的金额<font style="color: #16C59B;" id="finalAmount"> &nbsp;</font></p>
                </div>
			</div>
			<div class="back-list-box">
				<p class="back-list-tit">退款方式</p>
                 <div class="back-list-txt">
                 	  <p>退至支付账户，退款审核通过后，预计2-10个工作日返回到您的原支付账户。</p>
                </div>
			</div>
			<div class="back-list-btn">
				  <button id='subBtn'>提交</button>
			</div>
		</div>
		<script type="text/javascript">
			mui.init();
			$(function(){
			mui.post('${ctxFront}/mobile/toBackMoneyPage',{
				userid:'${sessionScope.front_user.id}',
				orderid:${orderid}
			},function(d){
				if(d.code == '400') {
					mui.alert(d.message,function(){
						window.history.back(-1); 
					})
				} 
				if(d.code == '200'){
					var finalAmount = d.data.dueamount - d.data.penalty;
					if (finalAmount<=0) {
						finalAmount = 0;
					}
					document.getElementById('penalty').innerText = '￥'+d.data.penalty;
					document.getElementById('finalAmount').innerText = '￥'+finalAmount;
				}
			}, 'json');
			$('#subBtn').on('tap', function() {
				mui.post('${ctxFront}/mobile/backMoney',{
				orderid:${orderid}
			},function(d){
				mui.alert(d.message,function(){
					window.history.back(-1); 
				})
			}, 'json');
			})
		})
		</script>
	</body>

</html>